<template>
  <xy-page title="">
    <xy-breadcrumb></xy-breadcrumb>
  
  <div class="system-index-btns mgb20">
      <el-button type="primary" icon="icon-scrappy-add" @click="$toPage('/auth-app-user-instance/edit',{userId:$utils.getParam('userId')})">新建用户实例</el-button>
      <!-- <el-button type="primary" icon="icon-scrappy-add" @click="editRow()">新建角色实例</el-button> -->
    </div>
    <!-- 列表区域-STR -->
    <xy-table :loading="listData.showLoading" :tableData="listData.tableData" @change="search" v-show="!listData.firtIn">
      <el-table-column min-width="40px" prop="id" label="流水号"></el-table-column>
      <el-table-column min-width="70px" prop="appName" label="系统名字"></el-table-column>
      <el-table-column min-width="110px" prop="appInstanceName" label="实例名字"></el-table-column>
      <el-table-column min-width="70px" prop="roleId" label="类型">
        <template slot-scope="scope">
           {{scope.row.roleId?"角色实例":"用户实例"}}
        </template>
      </el-table-column>
      <el-table-column min-width="70px" prop="roleName" label="角色名字">
        <template slot-scope="scope">
           {{scope.row.roleName?scope.row.roleName:"--"}}
        </template>
      </el-table-column>
       <el-table-column min-width="90px"  label="创建时间">
         <template slot-scope="scope">
           {{scope.row.createTime | date}}
        </template>
      </el-table-column>
      <el-table-column min-width="70px" prop="createName" label="创建人"></el-table-column>
      <el-table-column min-width="80px" label="更多">
        <template slot-scope="scope" v-if="scope.row.isEdit != 0">
          <el-button v-if="!scope.row.roleId" @click="$toPage('/auth-app-user-instance/edit',{userId:$utils.getParam('userId'),appUserInstanceId:scope.row.id})" type="text">编辑权限</el-button>
          <el-button v-if="scope.row.roleId" @click="editRow(scope.row)" type="text">选择角色</el-button>
          <el-button  @click="deleteRow(scope.row.id)" type="text" v-auth="'AUTH_USER-SAVE'">删除</el-button>
        </template>
      </el-table-column>
    </xy-table>
    <!-- 列表区域-END -->

    <!-- 保存记录-STR -->
    <el-dialog :title="editDialog.data.id?'修改':'添加'+editDialog.title" :visible.sync="editDialog.show" class="modal-resetpwd">

      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>系统实例:</label>
        <el-select v-model="editDialog.data.appInstanceId"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteMethod"
          :loading="loading"
          placeholder="请选择系统实例" :disabled="!!editDialog.data.id">
            <el-option v-for="item in appInstanceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        <span class="errmsg">{{editDialog.errmsg.appInstanceId}}</span>
      </div>

      <div class="form-row form-group ">
        <label class="text-right">
          <span class="require">*</span>关联角色:</label>
        <el-select v-model="editDialog.data.roleId" placeholder="关联角色">
            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        <span class="errmsg">{{editDialog.errmsg.descript}}</span>
      </div>

      <div slot="footer" class="dialog-footer">
        <xy-save v-model="editDialog.save" type="primary" @click="saveDialog">确 定</xy-save>
        <el-button  @click="editDialog.show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 保存记录-END -->


  </xy-page>
</template>

<script>
export default {
  name:"auth-app-user-instance-list",
  data() {
    return {
      searchFilter: {
      },
      appInstanceList:[],
      roleList:[],
      loading:false,
      listData: {
        firtIn: true,
        tableData: {
          total: 0,
          page: 1,
          size: 15,
          list: []
        },
        showLoading: false
      },
      editDialog:{
        title:"角色实例",
        url:"/admin/auth/instance/authAppUserInstance/saveByRole.do",
        data:{
          id:"",
          appInstanceId:"",
          roleId:""
        },
        errmsg:{
          id:"",
          appInstanceId:"",
          roleId:""
        },
        save:false,
        show:false
      }
    };
  },
  methods: {
    search(page) {
      page = page || this.listData.tableData.page;
      this.listData.firtIn = false;
      var param = {
        page: page || 1, //	Int	是	当前页
        displayRecord: this.listData.tableData.size
      };

      param.userId = Number(this.$utils.getParam("userId"));

      this.listData.tableData.list = [];
      this.listData.showLoading = true;

      this.$postStream("/admin/auth/user/authAppUserInstance/listForPage.do", {
        data: param,
        success: res => {
          this.listData.showLoading = false;
          if (res.success) {
            this.listData.tableData.list = res.object.list || [];
            this.listData.tableData.total = res.object.count;
            this.listData.tableData.page = page || 1
          } else {
            this.$message.error(res.message);
          }
        },
        error: () => {
          this.listData.showLoading = false;
        }
      });
    },
    resetForm() {
      this.searchFilter = {
      };
      this.search(1);
    },
    editRow(row){
      row = row || this.$options.data().editDialog.data;
      this.editDialog.data = JSON.parse(JSON.stringify(row));
      for(var key in this.editDialog.errmsg){
        this.editDialog.errmsg[key] = "";
      }
      this.remoteMethod();
      this.editDialog.show = true;
      this.$nextTick(()=>{
        this.editDialog.data.roleId = row.roleId || "";
      });
    },
    remoteMethod(query) {
      this.loading = true;
        this.$postStream("/admin/auth/instance/authAppInstance/list.do", {
          data:{
            quickSearch:query,
            type:1
          },
          success:(res) => {
            this.appInstanceList = res.object.list;
            this.loading = false;
          }
      });
    },
    saveDialog(){
      this.editDialog.save = true;
      this.editDialog.data.userId = this.$utils.getParam("userId");
      this.$postStream(this.editDialog.url, {
        data:this.editDialog.data,
        success: res => {
          if(res.success){
            this.$message.warning(res.message);
            this.editDialog.show = false;
            this.search();
          }else{
            this.$message.error(res.message);
          }
          this.editDialog.save = false;
        },error: () => {
          this.editDialog.save = false;
        }
      });
    },
    deleteRow(ids){
      this.$xyConfirm("是否删除，删除后将无法恢复？",()=>{
        this.$post("/admin/auth/instance/authAppUserInstance/delete.do",{
          data:{
            ids:ids
          },
          success:(res) => {
            if(!res.success){
              return this.$message.error(res.message);
            }
            this.$message.success(res.message);
            this.search();
          }
        });
      });
    }
  },
  mounted() {
    var id = this.$utils.getParam("userId");
    if(!id){
      this.$close(true);
      return this.$toPage("/auth-user/list");
    }
    this.search(1);
  },
  activated() {
    var id = this.$utils.getParam("userId");
    if(!id){
      this.$close(true);
      return this.$toPage("/auth-user/list");
    }
    this.search(1);
  },
  watch: {
    "editDialog.data.appInstanceId":function(newData,oldData){

      if(oldData){
        this.editDialog.data.roleId = "";
      }
      if(!this.editDialog.data.appInstanceId){
        
        this.roleList = [];
        return;
      }
      
      this.$postStream("/admin/auth/user/authRole/list.do", {
          data:{
            appInstanceId:this.editDialog.data.appInstanceId
          },
          success:(res) => {
           this.roleList = res.object || [];
          }
      });
    }
  },
};
</script>

<style lang="scss">
@import "../../../assets/scss/variable.scss";
.errmsg,.require{
  color:$xy-color-danger;
}
.system-index-btns {
    text-align: right;
    & i {
      font-size: 12px;
      margin-right: 8px;
      vertical-align: top;
    }
    & span {
      display: inline-block;
      vertical-align: top;
    }
  }
.device-info {
  .device-info-body {
    margin: 15px 15px 70px;
  }
  .el-dialog__header {
    border-bottom: 1px solid $xy-border-color-base;
  }
  .info-line {
    margin-bottom: 10px;
    span {
      display: inline-block;
      padding: 5px 0;
      color: $xy-text-color-primary;
      font-size: 14px;
      line-height: 24px;
    }
    span.name {
      min-width: 110px;
      line-height: 24px;
    }
  }
}
</style>
